<template>
  <view class="complain-shop">
		<NavBar title="投诉商家" :left="true"/>
    <view class="content">
      <view class="complain">
				<uni-forms ref="formRef" :rules="rules" :model="complaintInfo">
					<uni-forms-item name="complaint_cause">
						<view class="item">
							<view class="label"> 投诉举报</view>
							<uni-easyinput type="number" class="easy-input" v-model="complaintInfo.complaint_cause" placeholder="请填写您的举报类型" placeholderStyle="color:#C4C4C4;font-size:14px;" :input-border="false" :clearable="false" />
						</view>
					</uni-forms-item>
					<uni-forms-item name="age">
						<view class="item">
							<view class="label"> 下单状态 </view>
							<view class="value">
								<view class="check-item" @tap="isChecked(1)">
									<view class="is-check" :class="complaintInfo.is_pay == 1?'is-checked': ''"> </view>
									<view class="check-text"> 已下单 </view>
								</view>
								<view class="check-item" @tap="isChecked(0)">
									<view class="is-check" :class="complaintInfo.is_pay == 0?'is-checked': ''"> </view>
									<view class="check-text"> 未下单 </view>
								</view>
							</view>
						</view>
					</uni-forms-item>
					<uni-forms-item name="mobile">
						<view class="item">
							<view class="label"> 联系电话 </view>
							<uni-easyinput type="number" class="easy-input" v-model="complaintInfo.mobile" placeholder="请填写您的电话号码" placeholderStyle="color:#C4C4C4;font-size:14px;" :input-border="false" :clearable="false" />
						</view>
					</uni-forms-item>
					<uni-forms-item name="complaint_info">
						<view class="intro">
							<textarea v-model="complaintInfo.complaint_info" class="textarea" placeholder="请详细描述投诉举报的内容,平台会依法处理该商家"placeholder-style="color:#C4C4C4;font-size:14px;"/>
						</view>
					</uni-forms-item>
					<uni-forms-item name="img">
						<view class="imgs">
							<image :src="item" v-for="item in imgUrl" class="comp-img"/>
							<ChooseBtn @choose="choose" />
						</view>
					</uni-forms-item>
				</uni-forms>
      </view>
    </view>
    <!-- 按钮 -->
    <view class="btn" @tap="submit"> 提交信息 </view>
		<Select ref="selectRef" :arr="complaintType" @selected="selected"/>
  </view>
</template>

<script setup>
  import { ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app'
	import NavBar from '@/components/NavBar.vue';
	import ChooseBtn from '@/components/ChooseBtn.vue'
	import Select from '@/components/BottomSelectPopup.vue'
	import { useCommStore, useUserStore } from '@/store/index.js'
	import { isNull, isMobile } from '@/utils/valdate.js'
	import { uploadImgApi, ComplaintShopApi } from '@/service/index.js'
	const formRef = ref()
	const selectRef = ref()
	const complaintInfo = ref({
		complaint_cause: "", // 投诉类型 公共配置文件获得
		complaint_info: "", // 投诉内容
		img: "", // 投诉图片
		shop_id: '', // 投诉的商家
		mobile: "", // 联系电话
		is_pay: '1' // 是否下单
	})
	const rules = { // 校验
		complaint_cause: isNull('投诉举报类型'),
		complaint_info: isNull('投诉举报内容'),
		mobile: isMobile(),
	}
	const complaintType = ref() // 投诉类型
	const imgUrl = ref([]) // 此字段仅供展示
	const imgId = ref([])  // 此字段仅供展示
  const isChecked = (val) => {
		complaintInfo.value.is_pay = val
	}
	const choose = (e) => {
		imgId.value.push(e.id)
		imgUrl.value.push(e.img_url)
		complaintInfo.value.img = imgId.value.join(',')
	}
	const selected = (e) => {
		complaintInfo.value.complaint_cause = e
		selectRef.value.close()
	}
	// 提交投诉
	const submit = () => {
		formRef.value.validate().then(() => {
			let params = { ...complaintInfo.value }
			ComplaintShopApi(params).then(res => {
				getApp().globalData.toast('操作成功')
				setTimeout(() => {
					uni.navigateBack()
				}, 500)
			})
		})
	}
	onLoad((e) => {
		const { shop_id } = e
		const { comm } = useCommStore()
		complaintInfo.value.shop_id = shop_id
		complaintType.value = comm.complaint_cause
	})
</script>

<style lang="scss" scoped>
  .complain-shop {
    .content {
			padding: 10px 12px;
      box-sizing: border-box;
      .complain {
				padding: 0 16px 15px;
				border-radius: 10px;
				background-color: #fff;
				.uni-forms-item {
					margin-bottom: 0;
					align-items: center;
					min-height: 50px;
					border-bottom: 1px solid #eeeeee;
					box-sizing: border-box;
					&:nth-of-type(4), &:nth-of-type(5) {
						border-bottom: none;
					}
					.item {
						min-height: 50px;
						box-sizing: border-box;
						display: flex;
						align-items: center;
						justify-content: space-between;
						.label {
							color: #333333;
							font-size: 16px;
							font-weight: 400;
							margin-right: 10px;
							position: relative;
							&::before {
								position: absolute;
								top: 0;
								right: -7.5px;
								display: block;
								content: '*';
								color: red;
								font-size: 16px;
							}
						}
						.value {
							color: #c4c4c4;
							font-size: 14px;
							font-weight: 400;
							margin-left: 10px;
							display: flex;
							align-items: center;
							.text {
								color: #c4c4c4;
								&.a-text {
									color: #333333;
								}
							}
							.right {
								width: 14px;
								height: 14px;
								margin-left: 5px;
							}
							.check-item {
							  display: flex;
							  align-items: center;
								.is-check {
									width: 20px;
									height: 20px;
									background: url('/static/icon/cart/check.png') no-repeat center center;
									background-size: 100% 100%;
									&.is-checked {
										background: url('/static/icon/cart/checked.png') no-repeat center center;
										background-size: 100% 100%;
									}
								}
								.check-text {
									color: #666666;
									font-size: 14px;
									font-weight: 400;
									margin-left: 4px;
								}
							  &:nth-of-type(1) {
							    margin-right: 28px;
							  }
							}
						}
						.easy-input {
							flex: 1;
							color: #333333;
							font-size: 14px;
							font-weight: 400;
							text-align: right;
							margin-left: 10px;
							:deep(.uni-input-input) {
								color: #333333;
							}
						}
					}
					.intro {
						width: 100%;
						height: 120px;
						padding: 15px 0;
						box-sizing: border-box;
						.textarea {
							width: 100%;
							height: 100%;
							color: #333333;
							font-size: 14px;
						}
					}
					.imgs {
						display: grid;
						gap: 10px 0;
						grid-template-columns: repeat(4, 1fr);
						.comp-img {
							width: 74px;
							height: 74px;
							border-radius: 10px;
						}
					}
				}
				:deep(.uni-forms-item__error) {
					left: 0;
					top: 100%;
					right: 12px;
					font-size: 12px;
					text-align: right;
					padding-bottom: 3px;
					transform: translateY(-100%);
				}
        .comp-item {
          line-height: 50px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          border-bottom: #EEEEEE solid 1px;
          box-sizing: border-box;
          .label {
            color: #333333;
            font-size: 16px;
          }
					.value {
						display: flex;
						align-items: center;
						color: #C4C4C4;
						font-size: 14px;
						font-weight: 400;
						input {
							color: #333333;
							text-align: right;
						}
						.check-item {
						  display: flex;
						  align-items: center;
							.is-check {
								width: 20px;
								height: 20px;
								background: url('/static/icon/cart/check.png') no-repeat center center;
								background-size: 100% 100%;
								&.is-checked {
									background: url('/static/icon/cart/checked.png') no-repeat center center;
									background-size: 100% 100%;
								}
							}
							.check-text {
								color: #666666;
								font-size: 14px;
								font-weight: 400;
								margin-left: 4px;
							}
						  &:nth-of-type(1) {
						    margin-right: 28px;
						  }
						}
					}
        }
      //   .intro {
      //     min-height: 180px;
      //     padding-top: 16px;
      //     box-sizing: border-box;
      //     textarea {
						// width: 100%;
						// height: 100px;
      //       color: #C4C4C4;
      //       font-size: 14px;
						// margin-bottom: 10px;
      //     }
      //   }
      }
    }
    .btn {
      position: fixed;
      bottom: 12px;
      left: 12px;
      right: 12px;
      height: 50px;
      color: #FFFFFF;
      line-height: 50px;
      text-align: center;
      background: #FF3B1E;
      border-radius: 106px;
    }
  }
</style>
